<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="数据项名称" prop="areaName">
          <el-input v-model="queryForm.treeName" placeholder="用户" style="width: 100px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <h3>设备型号</h3>
        <my-instruction-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          @dialog-open="handleDialogOpen"
          @dialog-cancel="handleDialogCancel"
          :form-options="formOptions"
          add-title="新增"
          :add-template="addTemplate"
          :add-rules="addRules"
          @row-add="handleRowAdd"
          :rowHandle="rowHandle"
          edit-title="修改"
          :edit-template="addTemplate"
          :edit-rules="addRules"
          @row-edit="handleRowEdit"
        >
          <el-button size="mini" slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
        </d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
import MyInstructionTree from "@/components/my-instruction-tree";
import { Divider } from "element-ui";

export default {
  name: "instruction",
  components: { MyInstructionTree },

  data() {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      queryForm: {
        equipmentId: "",
        treeName: ""
      },
      columns: [
        {
          title: "序号",
          key: "serialNum",
          width: 50
        },
        {
          title: "数据项名称",
          key: "treeName",
          sortable: true
        },
        {
          title: "数据值",
          key: "treeValue",
          sortable: true
        },
        {
          title: "执行名称",
          key: "treeAction",
          sortable: true
        },
        {
          title: "执行方法",
          key: "treeMethod",
          sortable: true
        },
        {
          title: "设备类型",
          key: "equipmentTypeName",
          sortable: true
        }
      ],
      data: [],
      treeData: [],
      values: [],
      selectParams: {
        size: "mini"
      },
      rowHandle: {
        columnHeader: "操作",
        edit: {
          text: "编辑"
        },
      },

      selectionRow: [],
      treeParams: {
        "default-expand-all": true,
        data: [],
        props: {
          children: "children",
          label: "name",
          value: "id"
        }
      },
      formOptions: {
        labelWidth: "120px",
        labelPosition: "left",
        saveLoading: false
      },
      addTemplate: {
        id: {
          title: "id",
          value: "",
          component: {
            show: false
          }
        },
        equipmentId: {
          title: "equipmentId",
          value: "",
          component: {
            show: false
          }
        },
        treeName: {
          title: "指令名称",
          value: ""
        },
        equipmentType: {
          title: "设备类型",
          value: [],
          component: {
            name: "el-select",
            options: []
          }
        },
        commandType: {
          title: "指令类型",
          value: [],
          component: {
            name: "el-select",
            options: []
          }
        },
        treeAction: {
          title: "接口名称",
          value: ""
        },
        treeMethod: {
          title: "接口方法",
          value: ""
        },
        serialnumber: {
          title: "指令编号",
          value: ""
        },
        parseReadAction: {
          title: "解析接口名称",
          value: ""
        },
        parseReadMethod: {
          title: "解析接口方法",
          value: ""
        }
      },
      addRules: {
        treeName: [
          { required: true, message: "请输入指令名称", trigger: "blur" }
        ],
        equipmentType: [
          { required: true, message: "请选择设备类型", trigger: "blur" }
        ],
        commandType: [
          { required: true, message: "请选择指令类型", trigger: "blur" }
        ],
        treeAction: [
          { required: true, message: "请输入接口名称", trigger: "blur" }
        ],
        treeMethod: [
          { required: true, message: "请输入接口方法", trigger: "blur" }
        ],
        serialnumber: [
          { required: true, message: "请输入指令编号", trigger: "blur" }
        ],
        parseReadAction: [
          { required: true, message: "请输入解析接口名称", trigger: "blur" }
        ],
        parseReadMethod: [
          { required: true, message: "请输入解析接口方法", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getEquipmentType();
    this.initData();
  },
  methods: {
    handleDialogOpen({ mode, row, index }) {
      if (mode === "edit") {
        this.$api.admin_instruction_get({ id: row.id }).then(res => {
          this.$refs.d2Crud.setFormData(res);
        });
      }
    },
    //增加row数据
    handleRowEdit(row, done) {
      this.formOptions.saveLoading = true;
      this.$api
        .admin_instruction_update(row.row)
        .then(res => {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.handleFormSubmit();
          done();
        })
        .finally(() => {
          this.formOptions.saveLoading = false;
        });
    },
    //关闭弹框
    handleDialogCancel(done) {
      done();
    },
    //新增数据
    addRow() {
      this.$refs.d2Crud.showDialog({
        mode: "add"
      });
    },
    handleRowAdd(row, done) {
      this.formOptions.saveLoading = true;
      row.equipmentId = this.queryForm.equipmentId;
      this.$api
        .admin_instruction_add(row)
        .then(res => {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.handleFormSubmit();
          done();
        })
        .finally(() => {
          this.formOptions.saveLoading = false;
        });
    },
    //获取查询枚举
    getEquipmentType() {
      this.$api
        .admin_instruction_getEquipmentType()
        .then(res => {
          let equipmentTypeOptions = res.equipmentType.map(i => {
            return {
              value: i.value,
              label: i.valueName
            };
          });
          let instructionTypeOptions = res.instructionType.map(i => {
            return {
              value: i.value,
              label: i.valueName
            };
          });
          this.addTemplate.equipmentType.component.options = equipmentTypeOptions;
          this.addTemplate.commandType.component.options = instructionTypeOptions;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {});
    },
    //分页操作
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    },
    onAreaChange(data, node) {
      this.queryForm.equipmentId = data.id;
      this.fetchData();
    },
    initData() {
      this.$api;
      this.$api.admin_equipmentmodel_getList().then(res => {
        this.queryForm.equipmentId = res[0].id;
        this.handleFormSubmit();
      });
    },
    fetchData() {
      this.loading = true;
      this.$api
        .admin_instruction_getPageList({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          equipmentId: this.queryForm.equipmentId,
          treeName: this.queryForm.treeName
        })
        .then(res => {
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleFormSubmit() {
      this.pagination.currentPage = 1;
      this.fetchData();
    }
  }
};
</script>
